<script setup>
import { defineProps, computed, defineEmits } from 'vue'
import { copyText } from '@/utils/utils'

const emit = defineEmits(['replyAgain'])

const props = defineProps({
  role: Object,
  prompt: Object,
  receive: Object,
  display: 'bubble',
})

//重答
const replyAgain = () => {
  emit('replyAgain', props.prompt)
}

const status = computed(() => props.receive?.status ?? 'waiting')
</script>

<template>
  <!-- 气泡风格 -->
  <div class="bubble" v-if="display === 'bubble'">
    <!-- 我发送的 -->
    <div class="flex justify-end">
      <div class="sm:ml-12 sm:mr-2">
        <div class="bg-[--el-color-success-light-7] text-[--el-text-color-regular] p-3 rounded">
          {{ prompt.prompt_text }}
        </div>
      </div>
      <img :src="role.user.avatar" class="hidden sm:block w-10 h-10 rounded flex-none" />
    </div>
    <!-- 接收回复 status:waiting,receiving,error,finish -->
    <div class="flex mt-4">
      <img :src="role.assistant.avatar" class="hidden sm:block w-10 h-10 rounded flex-none" />
      <div class="inline-block sm:ml-2 sm:mr-12">
        <div :class="{ message: true, error: status === 'error' }">
          <div v-if="status === 'waiting'" class="space-x-1">
            <FontAwesomeIcon icon="spinner" spin />
            <span>思考中...</span>
          </div>
          <MarkdownRender v-else :content="props.receive?.content"></MarkdownRender>
        </div>
        <div class="flex items-center opacity-50 mt-1 space-x-2">
          <span class="text-[12px] space-x-0.5" v-if="prompt.channel">
            <FontAwesomeIcon icon="cubes" /><span>{{ prompt.channel.name }}</span>
          </span>
          <span
            class="cursor-pointer text-[12px] space-x-0.5"
            v-if="status === 'finish' && receive?.content.length > 50"
            @click="replyAgain"
          >
            <FontAwesomeIcon icon="refresh" /><span>重答</span>
          </span>
          <span
            class="cursor-pointer text-[12px] space-x-0.5"
            v-if="status === 'finish'"
            @click="copyText(receive.content)"
          >
            <FontAwesomeIcon icon="clone" /><span>复制</span>
          </span>
          <span class="cursor-pointer text-[12px] space-x-0.5" v-if="status === 'receiving'">
            <FontAwesomeIcon icon="spinner" spin /><span>接收中...</span>
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- 列表风格 -->
  <div class="list" v-if="display === 'list'">
    <div class="flex flex-col bg-[--el-bg-color] rounded p-1 shadow">
      <div class="flex items-start p-2 sm:space-x-3">
        <img :src="role.user.avatar" class="hidden sm:block w-10 h-10 rounded flex-none mt-0.5" />
        <div class="flex-1">
          <div>{{ prompt?.prompt_text }}</div>
          <div class="text-[12px] opacity-50 space-x-0.5">
            <span class="text-[--el-text-color]">{{ prompt?.send_at }}</span>
          </div>
        </div>
      </div>
      <div class="h-[1px] bg-[--el-border-color-lighter] my-1 mx-1"></div>
      <div class="flex items-start p-2 sm:space-x-3">
        <img
          :src="role.assistant.avatar"
          class="hidden sm:block w-10 h-10 rounded flex-none mt-1"
        />
        <div class="flex-1">
          <div v-if="status === 'waiting'" class="space-x-1">
            <FontAwesomeIcon icon="spinner" spin />
            <span>接收中...</span>
          </div>
          <div v-else-if="status === 'error'" class="error" v-html="props.receive?.content"></div>
          <MarkdownRender v-else :content="props.receive?.content"></MarkdownRender>
          <div class="flex items-center opacity-50 mt-1 space-x-2 text-[12px]">
            <span class="space-x-0.5" v-if="prompt.channel">
              <FontAwesomeIcon icon="cubes" /><span>{{ prompt.channel.name }}</span>
            </span>
            <span
              class="cursor-pointer space-x-0.5"
              v-if="status === 'finish' && receive.content.length > 50"
              @click="replyAgain"
            >
              <FontAwesomeIcon icon="refresh" /><span>重答</span>
            </span>
            <span
              class="cursor-pointer space-x-0.5"
              v-if="status === 'finish'"
              @click="copyText(receive.content)"
            >
              <FontAwesomeIcon icon="clone" /><span>复制</span>
            </span>
            <span class="cursor-pointer text-[12px] space-x-0.5" v-if="status === 'receiving'">
              <FontAwesomeIcon icon="spinner" spin /><span>接收中...</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div v-if="props.prompt.next_anew === 1" class="w-[80%] mx-auto">
    <el-divider>上下文已清空</el-divider>
  </div>
</template>

<style scoped>
.bubble {
  @apply mt-4;
}

.bubble :deep(.message) {
  @apply inline-block p-3 rounded bg-[--el-color-primary-light-8] text-[--el-text-color-regular];
}

.bubble :deep(.error) {
  @apply bg-[--el-color-error-light-9] text-[--el-color-error];
}

.list {
  @apply border border-[--el-border-color-light] rounded mb-3;
}

.list :deep(.error) {
  @apply text-[--el-color-error];
}
</style>
